<template>
	<view>
		<view @touchmove.stop.prevent="moveHandle" v-if="isShowModel" class="menuModel" @tap="isShowMenu()">
			<view class="menu">
				<!-- <view @tap="toCarRecord()" hover-class="hover" class="menuBut"><image src="../../../static/carNumList/cheliang.png"></image><text>车辆备案</text></view> -->
				<view @tap="add()" hover-class="hover" class="menuBut"><image src="../../../static/carNumList/yunshujilu.png"></image><text>车辆运输备案</text></view>
			</view>
		</view>
		<view class="searchModelBox">
		<view class="searchModel">
			<input disabled="true" @tap="toSearch()" placeholder-style="font-size:30rpx;" placeholder="输入车牌号搜索" />
			<text class="icon iconfont icon-search "></text>
		</view>
		<!-- <view class="scan">
			<image  src="../../../static/productionAdmin/add.png" style="width: 45rpx; height:45rpx; " mode="aspectFit"></image>
		</view> -->
		
		</view>
		<view class="formModel">
			<template v-if="data">
			<block v-for="(item,index) in data" :key="index">
			<view @tap="toCarNumDetails(index)" class="carList">
				<view class="cu-form-group">
					<view class="title">车牌号</view>
					<input  disabled="true"  :placeholder="item.license_plate" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">线上状态</view>
					<input  disabled="true"  :placeholder="item.online_state" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">实时载重</view>
					<input  disabled="true" :placeholder="item.dead_weight_capacity" name="input"></input>
				    <text style="font-size:30rpx;">KG</text>
				</view>
				<view class="cu-form-group">
					<view class="title">所属机构</view>
					<input  disabled="true"  :placeholder="item.equipment_affiliate" name="input"></input>
				</view>
			</view>
			</block>
			</template>
			<template v-else>
				<view class="nothing">
					<image src="../../../static/common/noCar.png" mode="widthFix"></image>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import noThing from "../../../components/common/no-thing.vue"
	export default {
		components:{
			noThing
		},
		data() {
			return {
				data:'',
				isShowModel:false
			};
		},
		onReady() {
			this.getCarInfo();
		},
		onNavigationBarButtonTap() {
			//菜单栏
			this.isShowMenu()
		},
		methods:{
		
			//菜单栏
			isShowMenu(){
				this.isShowModel = !this.isShowModel
			},
			//前往搜索
			toSearch(){
				uni.navigateTo({
					url:"./farmerCarSearch/farmerCarSearch"
				})
			},
			//前往车辆运输记录新增
			add(){
				uni.navigateTo({
					url:"./carAdmin"
				})
			},
			//前往车辆备案
			toCarRecord(){
				uni.navigateTo({
					url:"./carRecord"
				})
			},
			//获取养殖签约车辆信息
			getCarInfo(){
				uni.request({
					url:this.confige.webUrl+"/filing/selectZfCarInfo",
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						console.log(res)
					    this.data = res.data.result;
					}
				})
			},
			//查看车辆运输信息
			toCarNumDetails(index){
				let  license_plate = this.data[index].license_plate;
				// console.log(license_plate)
				uni.navigateTo({
					url:"./carNumDetails?license_plate="+license_plate
				})
			}
		}
	}
</script>
 
<style lang="less">
    @import "../../../common/global.less";
	@import "../../../common/main.css";
	@import "../../../common/colorui/icon.css";
	@import "../../../common/iconfont.css";
	page{ background-color: #F4F4F4;}
	.nothing{
		height:80vh;
		 // background-color: #FFFFFF;
			image{
				 width: 65%;
				 height:65%;
			}
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
	.hover{ background-color:rgba(0,0,0,0.1);}
	.menuBut{
		padding:30rpx 0rpx 30rpx 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content:flex-start;
		image{ width: 60rpx;height: 50rpx;}
		text{ padding-left: 20rpx; font-size: 35rpx;letter-spacing: 5rpx; }
	}
	.menuModel{
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100vh;
		height: 100vh;
		background-color: rgba(0,0,0,0.2);
		// position: relative;
		.menu{
			z-index: 2;
			position: fixed;
			top:4rpx;
			right:18rpx;
			width: 402rpx;
			height: 344rpx;
			background-image: url(../../../static/carNumList/qipa.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			// align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}
	.carRecrd{
		height: 80rpx;
		width: 200rpx;
		border: 1rpx solid #000000;
	}
	.searchModelBox{
		background-color:#FFFFFF;
		height:80rpx ;
		display: flex;
		align-items: center;
	}
	.scan {
		position:absolute;
		right: 0;
		top: 0;
		margin: 18rpx 16rpx;
	}
	.searchModel {
		position:relative;
		width: 75%;
		margin: 20rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 5rpx;
		height: 70rpx;
		border: 2rpx solid #C3EDDD;
		border-radius: 60rpx;
		color: #717171;
		>input {
			width: 85%;
		}
		>text {
			font-size: 35rpx;
		}
	}
	.carList{ margin: 10rpx 0rpx; }
	.mapText{ font-size: 28upx;}
	.RadioStyle{ 
		radio{
			margin-right: 10rpx;
			font-size: 30rpx;
			}
		}
	.bottomModel{
	margin-top: 50rpx;
	// .butStyle{font-size: 30rpx; border-radius: 90rpx;width: 600rpx; height:80rpx;line-height: 80rpx;color:#FFFFFF; background-color:@maincolor;}
	}
	.formModel{
	// background-color:@backcolorthree;
	// border-bottom:2rpx solid #eaeaea;
	.cu-form-group {
	.title {min-width: calc(4em + 15px);}		
	}
	}
</style>
